<template>
  <el-dialog
      :title="dialogType+title"
      :visible.sync="dialogVisible"
      :width="width"
      :close-on-click-modal="false"
      top="0">
    <GeneralForm ref="addForm" v-bind="params"></GeneralForm>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelClick()">取 消</el-button>
      <el-button type="primary" @click="confirmClick()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {formDataTransform} from "@/utils/GeneralTable";
export default {
  name: "TypeDialog",
  components: {
    GeneralForm: () => import('../FormComponent/GeneralForm')
  },
  props: {
    // 弹出框标题
    title: {
      type: String,
      default() {
        return ''
      }
    },
    // 确认api
    confirmFunction: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    },
    // 弹窗宽度
    width: {
      type: String,
      default() {
        return ''
      }
    },
    // 表单配置数据
    formOption: {
      type: Object,
      default() {
        return {}
      }
    },
    // 弹窗类型
    dialogType: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      params: {}
    }
  },
  methods: {
    // 提供给父级调用的显示函数
    show() {
      this.dialogVisible = true
      // 等待弹出对话框渲染完毕
      this.$nextTick(() => {
        // 赋值数据进入弹窗
        this.$refs.addForm.setData()
        // 清除表单验证信息
        this.$refs.addForm.clearCheck()
      })
    },
    // 取消按钮点击
    cancelClick() {
      this.dialogVisible = false
      this.$refs.addForm.clearData()
    },
    // 确认按钮点击
    confirmClick() {
      // 验证表单
      this.$refs.addForm.getValidate((valid)=> {
        if (valid) {
          // 去除值为空的属性
          let param = this.$refs.addForm.getFormData()
          for (let item in param){
            if (param[item] === '') delete param[item]
          }

          // 调用添加api
          this.confirmFunction(param).then((res) => {
            this.$notify({
              type: 'success',
              title: '成功',
              message: this.dialogType + this.title + '成功'
            })
            this.$refs.addForm.clearData()
            // 传递事件结果
            this.$emit('addSuccessEvent',res)
          }).catch(error => {
            this.$notify({
              type: 'error',
              title: '失败',
              message: this.dialogType + this.title + '失败\n' + error.msg
            })
            console.error(error)
            // 传递事件结果
            this.$emit('addErrorEvent',error)
          })
          this.dialogVisible = false
        }
      })
    },
    // 添加表单数据
    addFormData(data) {
      this.$refs.addForm.addFormData(data)
    }
  },
  created() {
    // 转换数据格式
    this.params = formDataTransform(this.formOption)
  },
  watch: {
    // 动态监听list数据变化
    formOption:{
      handler() {
        this.params = formDataTransform(this.formOption)
      },
      deep: true
    }
  }
}
</script>

<style>
/*设置最大高度*/
.el-dialog {
  max-height: 90vh;
  overflow: auto;
  margin-top: 0
}
/*对话框居中*/
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
}
/*对话框头部固定*/
.el-dialog__header{
  background: white;
  z-index: 10;
  top: 0;
  position: sticky;
  border-bottom: 1px solid #e8eaec;
}
/*对话框尾部固定*/
.el-dialog__footer {
  background: white;
  z-index: 10;
  bottom: 0;
  position: sticky;
  border-top: 1px solid #e8eaec;
}
</style>
